<template>
    <el-drawer v-model="drawerVisible" direction="rtl">
        <template #header>
            <h4>权限设置</h4>
        </template>
        <template #default>
            <div>
                <el-row class="rowItem">
                    <el-col :span="6">角色名称：</el-col>
                    <el-col :span="18">{{roleItem.roleName}}</el-col>
                </el-row>
                <el-row class="rowItem">
                    <el-col :span="6">选择权限：</el-col>
                    <el-col :span="18">
                        <el-tree
                                ref="treeRef"
                                :data="menuList"
                                show-checkbox
                                default-expand-all
                                node-key="_id"
                                highlight-current
                                :props="treeProps"
                        />
                    </el-col>
                </el-row>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup name="RoleDraw">
    const props = defineProps({
        dVisible: {
            type: Boolean,
            default: false
        },
        role: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })

    const { proxy } = getCurrentInstance()
    let drawerVisible = ref(false)
    let roleItem = ref({})
    const menuList = ref([])
    const treeRef = ref()
    const treeProps = {
        children: 'children',
        label: '_id',
    }

    onMounted(() => {
        getMenuList()
    })

    watch(() => [props.dVisible, props.role], (val) => {
        console.log(props.dVisible, val);
        drawerVisible.value = val[0]
        Object.assign(roleItem.value, val[1])
        if (val[1]){
            nextTick(()=>{
                treeRef.value.setCheckedKeys(roleItem.value.permissionList.checkedKeys)
            })
        }
    })

    const emit = defineEmits(['update:dVisible', 'success'])

    const cancelClick = () => {
        emit("update:dVisible", false)
    }
    const confirmClick = async () => {
        // console.log(treeRef.value.getCheckedKeys(false))
        // console.log(treeRef.value.getCheckedKeys(true))
        // console.log(treeRef.value.getHalfCheckedKeys())
        let nodes = treeRef.value.getCheckedNodes(false)
        let halfKeys = treeRef.value.getHalfCheckedKeys()
        let parents = []
        nodes.map((node) => {
            if (node.children) {
                parents.push(node._id)
            }
        })
        const params = {
            _id: roleItem.value._id,
            checkedKeys: treeRef.value.getCheckedKeys(true),
            halfCheckedKeys: parents.concat(halfKeys)
        }
        await proxy.$api.updateRolePermission(params)
        proxy.$message.success(`设置权限成功`)
        emit('success')
        cancelClick()
    }
    const getMenuList = async () => {
        menuList.value = await proxy.$api.getMenuList()
    }
</script>

<style scoped>
.rowItem {
    font-size: 14px;
    color: #606266;
    margin-bottom: 1rem;
}
</style>
